<template>
    <div class="button-file-upload" style="border: 0px;">
      <el-upload
        class="avatar-uploader"
        :headers="headers"
        action="api/file/txtFile"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <el-button type="info" size="mini">{{ buttonName }}</el-button>

      </el-upload>
    </div>
</template>
<script>
import store from '@/store'

export default {
  props: {
    buttonName: String // 声明textData作为一个字符串类型的prop
  },
  data () {
    return {
      headers: {
        token: store.state.user.userInfo.token
      },
      LocalButtonName: this.buttonName,
      fileUrl: '',
      fileStr: '' // 字符串类型
      // buttonName: '原文上传'
    }
  },
  // 自定义文件长传
  methods: {
    beforeAvatarUpload (file) {
      // 获取文件的扩展名（后缀）
      const extension = file.name.split('.').pop().toLowerCase()
      // 允许上传的文件类型数组
      const allowedExtensions = ['txt']

      // 检查文件类型是否在允许的列表中
      if (allowedExtensions.indexOf(extension) === -1) {
        this.$message.error('只允许上传 txt文件')
        return false // 阻止上传
      }

      return true // 允许上传
    },
    handleSuccess (response) {
      if (response.code === 1) {
        this.fileStr = response.data
        this.$emit('file-uploaded', this.fileStr)
        this.$message.success('文件上传成功')
        this.fileStr = response.data
      } else {
        this.$message.error('文件上传失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 0px ; /* 将边框设置为0，即移除边框 */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

</style>
